﻿@{
    ViewBag.Title = "系统工具";
    Layout = "~/Views/Shared/_Index.cshtml";
}
@using Raffles.OA.Utility
@using Raffles.OA.Data
<link href="~/Content/plugin/iCheck/skins/custom.min.css" rel="stylesheet" />
<script src="~/Content/plugin/iCheck/icheck.min.js"></script>
<link href="/Content/plugin/bootstrap.datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="/Content/plugin/bootstrap.datepicker/js/moment-with-locales.js"></script>
<script src="/Content/plugin/bootstrap.datepicker/js/bootstrap-datetimepicker.min.js"></script>
<link href="~/Content/plugin/bootstrap.daterangepicker/daterangepicker.min.css" rel="stylesheet" />
<script src="~/Content/plugin/bootstrap.daterangepicker/daterangepicker.min.js"></script>
<link href="~/Content/plugin/zTree/v3/css/metroStyle/metroStyle.min.css" rel="stylesheet" />
<script src="~/Content/plugin/zTree/v3/js/ztree.min.js"></script>

<style>
    .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
        border: 1px solid #d2d6de;
        border-radius: 5px;
        padding: 6px !important;
        height: 32px;
    }
    .input-group-addon {
       /* border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-top-right-radius: 5px !important;
        border-bottom-right-radius: 5px !important;*/
    } 
</style>
<section class="content">
    <div class="row">
        <div class="col-md-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>常用表单</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <form class="form-horizontal m" role="form">
                                <div class="form-group">
                                    <label class="control-label col-xs-5">文本框：</label>
                                    <div class="col-xs-7">
                                        <input type="text" id="txtEnabledMark" col="EnabledMark0" class="form-control">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-5">树形下拉</label>
                                    <div class="col-xs-7">
                                        <div id="departmentId" col="DepartmentId">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-5">单选框(Data)：</label>
                                    <div class="col-xs-7" id="radioSourceData" col="EnabledMark1">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-5">单选框(Url)：</label>
                                    <div class="col-xs-7" id="radioSourceUrl" col="EnabledMark2">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-5">复选框(Data)：</label>
                                    <div class="col-xs-7" id="checkSourceData" col="EnabledMark3"></div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-5">复选框(Url)：</label>
                                    <div class="col-xs-7" id="checkSourceUrl" col="EnabledMark4"></div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-5">下拉框(Data)：</label>
                                    <span class="col-xs-7" id="comboBoxSourceData" col="EnabledMark5"></span>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-5">下拉框(Url)：</label>
                                    <span class="col-xs-7" id="comboBoxSourceUrl" col="EnabledMark6"></span>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-5">下拉框(多选)：</label>
                                    <span class="col-xs-7" id="multipleComboBoxSourceUrl" col="EnabledMark7"></span>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-5">下拉框(Data)：</label>
                                    <div class="col-xs-7">
                                        <select id="selectSourceData" col="EnabledMark8" class="form-control">
                                            <option value="">请选择</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-5">下拉框(Url)：</label>
                                    <div class="col-xs-7">
                                        <select id="selectSourceUrl" col="EnabledMark9" class="form-control">
                                            <option value="">请选择</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-5">下拉框(Url)：</label>
                                    <div class="col-xs-7">
                                        <select id="multipleSelectSourceUrl" col="EnabledMark10" multiple class="form-control">
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-5">日期选择：</label>
                                    <div class="col-xs-7">
                                        <div class='input-group date' id='dateControl'>
                                            <input type='text' class="form-control required" placeholder="日期选择" col="DateControl" />
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-5">日期选择：</label>
                                    <div class="col-xs-7">
                                        <div class='input-group date' id='dateControl2'>
                                            <div class="input-group-addon">当前日期</div>
                                            <input type='text' class="form-control required" placeholder="日期选择" col="DateControl2" />
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-xs-5">日期选择：</label>
                                    <div class="col-xs-7">
                                        <div class='input-group date'>
                                            <div class="input-group-addon">双日期</div>
                                            <input type='text' class="form-control required" placeholder="日期选择" id="DateControl3" col="DateControl3" />
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script type="text/javascript">

    $(function () {
        //树形下拉
        $('#departmentId').frameComboBoxTree({
            url: '@Url.Content("/Manage/Department/GetDepartTreeSelect")',
            placeholder:'请选择'
        });
        $('#departmentId').frameComboBoxTree("setValue", 2);
        //单选框(Data)
        $("#radioSourceData").frameRadioBox({
            data: frame.getJson(@Html.Raw(typeof(EnabledMarkEnum).EnumToDictionaryString())),
            default: 1,
            onCheck: function (event) {
                console.log("当前radio选中值:" + event.target.value);
            }
        });
        //单选框(Url)
        $("#radioSourceUrl").frameRadioBox({
            url: "/Common/GetEnabledStatus",
            default: 0,
            onCheck: function (event) {
                console.log("当前radio选中值:" + event.target.value);
            }
        });
        //复选框(Data)
        $("#checkSourceData").frameCheckBox({
            data: frame.getJson(@Html.Raw(typeof(EnabledMarkEnum).EnumToDictionaryString())),
            default: 1,
            onCheck: function (event) {
                console.log('onCheck_checked = ' + event.target.checked);
                console.log('onCheck_value = ' + event.target.value);
            },
            onUncheck: function (event) {
                console.log('onCheck_checked = ' + event.target.checked);
                console.log('onCheck_value = ' + event.target.value);
            }
        });
        //复选框(Url)
        $("#checkSourceUrl").frameCheckBox({
            url: "/Common/GetEnabledStatus",
            default: [0, 1],
            onCheck: function (event) {
                console.log('onCheck_checked = ' + event.target.checked);
                console.log('onCheck_value = ' + event.target.value);
            },
            onUncheck: function (event) {
                console.log('onCheck_checked = ' + event.target.checked);
                console.log('onCheck_value = ' + event.target.value);
            }
        });
        //ComboBox
        //下拉框(Data)
        $("#comboBoxSourceData").frameComboBox({
            data: frame.getJson(@Html.Raw(typeof(EnabledMarkEnum).EnumToDictionaryString())),
            default: 1,
            onChange: function (event) {
                console.log("当前select选中值:" + event.target.value);
            }
        });
        //下拉框(Url)
        $("#comboBoxSourceUrl").frameComboBox({
            url: "/Common/GetEnabledStatus",
            search: true,
            default: 0,
            onChange: function (event) {
                console.log("当前select选中值:" + event.target.value);
            }
        });
        //下拉框(多选)
        $("#multipleComboBoxSourceUrl").frameComboBox({
            url: "/Common/GetEnabledStatus",
            multiple: true,
            default: [0, 1],
            onChange: function (event) {
                console.log($(this).val()) 
            }
        });
        //Select
        //下拉框(Data)
        $("#selectSourceData").frameSelect({
            data: frame.getJson(@Html.Raw(typeof(EnabledMarkEnum).EnumToDictionaryString())),
            default: 1,
            onChange: function (event) {
                console.log("当前select选中值:" + event.target.value);
            }
        });
        //下拉框(Url)
        $("#selectSourceUrl").frameSelect({
            url: "/Common/GetEnabledStatus",
            search: true,
            default: 0,
            tags: true,//下拉框中若没有要选择的值，则允许动态创建项
            onChange: function (event) {
                console.log("当前select选中值:" + event.target.value);
            }
        }); 
        //下拉框(多选)
        $("#multipleSelectSourceUrl").frameSelect({
            url: "/Common/GetEnabledStatus",
            default: [0, 1],
            onChange: function (event) {
                console.log($(this)) 
                console.log($(this).val()) 
            }
        });

        //日期选择框
        $("#dateControl").datetimepicker({
            format: 'YYYY-MM-DD',
            showClear: true,
            locale: moment.locale('zh-cn'),
            useCurrent: false//true代表点击日期选择器后控件默认就会显示当前日期
        });
        //日期选择框
        $("#dateControl2").datetimepicker({
            format: 'YYYY-MM-DD',
            showClear: true,
            locale: moment.locale('zh-cn')
        }).on('dp.change', function (e) { 
            console.log(e.date);  
        });
        //双日期选择
        $('#DateControl3').daterangepicker({
            locale: {
                format: 'YYYY-MM-DD'
            },
            startDate: moment().startOf('month'),
            endDate: moment().endOf('month') 
        }).on('apply.daterangepicker', function (ev, picker) {
            console.log('确定')
        }).on('cancel.daterangepicker', function (ev, picker) {
            console.log('重置')
            // 重置选择器的值为默认值
            picker.setStartDate(moment().startOf('month'));
            picker.setEndDate(moment().endOf('month'));
            // 更新输入框的值 
            $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
        });
    });
</script>